<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['项目管理', '群消息记录']"
      icon="fa fa-smile-o"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>群消息记录</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn" style="width: calc(100% - 230px)">
                <div class="top_module cancle">
                  <span class="module_text">处理人</span>
                  <input
                    type="text"
                    class="module_inp top_module_select"
                    [(ngModel)]="tableParam.handler"
                    placeholder="处理人姓名"
                  />
                  <div class="s_del_icon" (click)="delKey()">x</div>
                </div>
                <div class="selectDate top_module">
                  <table-select-date [notInit]="true" (outerTime)="getSelectTableTime($event)"></table-select-date>
                </div>
                <button class="btn btn-primary" (click)="tableSearch()">查询</button>
                <button type="button" class="btn btn-primary" (click)="exportData()">导出</button>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>车牌</th>
                    <th>处理人</th>
                    <th>日期</th>
                    <th>群名称</th>
                    <th>问题</th>
                    <th>提问题的人</th>
                    <th>归类</th>
                    <th>项目名称</th>
                    <th>安装厂区</th>
                    <th>问题开始时间</th>
                    <th>问题结束时间</th>
                    <th>备注</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    *ngFor="let row of tableData"
                    [attr.data-index]="i"
                    [ngClass]="{ selected: activeSelected === row.id }"
                    (dblclick)="checkAbnormal(row)"
                  >
                    <td>{{ row.carNumber }}</td>
                    <td>{{ row.handler }}</td>
                    <td>{{ row.createTime }}</td>
                    <td>{{ row.groupName }}</td>
                    <td>{{ row.question }}</td>
                    <td>{{ row.questioner }}</td>
                    <td>{{ row.typeDesc }}</td>
                    <td>{{ row.projectName }}</td>
                    <td>{{ row.installFactoryName }}</td>
                    <td>{{ row.queStartTime }}</td>
                    <td>{{ row.queEndTime }}</td>
                    <td>{{ row.remark }}</td>
                    <td>
                      <button type="button" (click)="editRow(row)">编辑</button>
                      <button type="button" (click)="deleteRow(row)">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!--折线图-->
  <div style="background: white; border-radius: 5px; margin-top: 5px; position: relative" [hidden]="!isChartView">
    <button (click)="closeChart()" class="div_closeBtn">×</button>
    <div class="widget-body no-padding" style="margin: 0">
      <div class="page-header clearfix s_table_opreation" style="margin: 0">
        <div class="left page-header-btn" style="padding: 5px">
          <div class="top_module">
            <span class="module_text" style="background: none">异常数据折线图</span>
          </div>
          <div style="display: inline-block">
            <div>
              <div class="selectDate top_module">
                <table-select-date
                  [notInit]="true"
                  [specifyId]="specifyId"
                  [specifyTime]="specifyTime"
                  (outerTime)="getSelectChartTime($event)"
                ></table-select-date>
              </div>
              <button type="button" class="btn btn-primary" (click)="drawAbnormalChart()">查看</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <sa-chart-bmap
      [height]="325"
      [inputParams]="selectedRow"
      [isBaiduMap]="true"
      (outerSend)="runParent($event)"
      (outerIsMap)="showMapView($event)"
      [isAuditData]="false"
      [isShowModify]="true"
    ></sa-chart-bmap>
    <div [hidden]="!isMapView">
      <sa-bmap-chart [trackParams]="drawTrackArr" [isShowBmap]="isMapView" deviceId="deviceId"></sa-bmap-chart>
    </div>
  </div>

  <!-- 编辑群消息-->
  <div
    id="messageEditModal"
    class="modal fade"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeMessageEditModal()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">编辑群消息记录</h4>
        </div>
        <form
          id="messageEditForm"
          class="form-horizontal"
          role="form"
          novalidate="novalidate"
          [saBootstrapValidator]="validatorOptions"
        >
          <div class="modal-body">
            <div class="row form-horizontal">
              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">车牌</label>
                <div class="col-sm-10">
                  <input
                    class="form-control"
                    [disabled]="messageEditForm.type != '12'"
                    type="text"
                    name="carNumberInput"
                    id="groupMessageCarNumberInput"
                    [(ngModel)]="messageEditForm.carNumber"
                  />
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">安装厂区</label>
                <div class="col-sm-10">
                  <input
                    disabled
                    class="form-control"
                    name="installFactoryNameInput"
                    id="installFactoryNameInput"
                    [(ngModel)]="messageEditForm.installFactoryName"
                  />
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">
                  群名称
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <input
                    class="form-control"
                    name="groupNameInput"
                    id="groupNameInput"
                    [(ngModel)]="messageEditForm.groupName"
                  />
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">
                  提问题的人
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <input class="form-control" name="questionerInput" [(ngModel)]="messageEditForm.questioner" />
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">
                  问题
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <input class="form-control" name="questionInput" [(ngModel)]="messageEditForm.question" />
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">
                  归类
                  <sup>*</sup>
                </label>
                <div class="col-sm-10">
                  <select
                    id="groupMsgType"
                    name="groupMsgType"
                    [(ngModel)]="messageEditForm.type"
                    class="form-control inline_block fix_padding bottomborder"
                    (change)="msgTypeChange()"
                  >
                    <option value="">请选择</option>
                    <option value="1">设备状态查询</option>
                    <option value="2">订单-传感器问题</option>
                    <option value="3">订单-GPS问题</option>
                    <option value="4">订单-离线</option>
                    <option value="5">订单-算法问题</option>
                    <option value="6">订单-磅单问题</option>
                    <option value="7">订单-数据正常</option>
                    <option value="8">续费</option>
                    <option value="9">同步</option>
                    <option value="10">更改ID</option>
                    <option value="11">移机-改车牌</option>
                    <option value="12">临时放行</option>
                    <option value="13">录车</option>
                  </select>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">项目</label>
                <div class="col-sm-10">
                  <sa-company-tree
                    wrap="html"
                    wrapId="messageEditForm"
                    companyTreeId="companyTreeRecord"
                    [Height]="32"
                    [inputApi]="inputApi"
                    inputName="projectName"
                    [companyNameValue]="messageEditForm.projectName"
                    [companyParentList]="companyParentList"
                    [companyIdValue]="messageEditForm.projectId"
                    (companySelected)="massageCompanySelected($event)"
                  ></sa-company-tree>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">问题开始时间</label>
                <div class="col-sm-10">
                  <div class="clearfix">
                    <input
                      class="form-control"
                      name="queStartTime"
                      id="queStartTime"
                      autocomplete="off"
                      [(ngModel)]="messageEditForm.queStartTime"
                      type="text"
                      placeholder="请选择问题开始时间"
                    />
                  </div>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">问题结束时间</label>
                <div class="col-sm-10">
                  <div class="clearfix">
                    <input
                      class="form-control"
                      name="queEndTime"
                      id="queEndTime"
                      autocomplete="off"
                      [(ngModel)]="messageEditForm.queEndTime"
                      type="text"
                      placeholder="请选择问题结束时间"
                    />
                  </div>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-sm-2 no-padding-right">备注</label>
                <div class="col-sm-10">
                  <input class="form-control" name="remarkInput" [(ngModel)]="messageEditForm.remark" />
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="closeMessageEditModal()">取消</button>
            <button type="button" class="btn btn-primary" (click)="messageEditSubmit()">确认</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<style>
  .cancle {
    position: relative;
  }

  .cancle:hover > .s_del_icon {
    display: inline-block;
  }
  /* 排序的样式 */
  .table_scroll th {
    position: relative;
  }
  .sort-icon {
    position: absolute;
    right: 18px;
    top: 5px;
  }
  .sort-icon .fa {
    padding: 5px;
    position: absolute;
    top: -4px;
    font-size: 16px;
    cursor: pointer;
    color: #aaa;
    transform: rotate(90deg);
  }
  .sort-icon .fa.active {
    color: #196ddd;
  }
  .sort-icon .fa-caret-right {
    top: 6px;
  }
</style>
